<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head> 
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>后台登录</title>
		<link rel="stylesheet" type="text/css" href="static/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="static/admin/css/login.css" />
	</head>

	<body>
		<div class="m-login-bg">
			<div class="m-login">
				<h3>便民自动售货系统后台登录</h3>
				<c:if text="manager != null">
				<%session.invalidate();%>
				</c:if>
				<div class="m-login-warp">
					<form class="layui-form">
						<div class="layui-form-item">
							<input type="text" id="managerName" name="managerName" required lay-verify="required|managerName" placeholder="管理员账号" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<input type="password" id="managerPwd" name="managerPwd" required lay-verify="required|managerPwd" placeholder="管理员密码" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<input type="text" id="verity" name="verity" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-inline">
								<img id="verityid" class="verifyImg" onclick="this.src=this.src+'?c='+Math.random();" src="Kaptcha" title="看不清,点击换一张" />
							</div>
						</div>
						<div class="layui-form-item m-login-btn">
							<div class="layui-inline">
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
							</div>
							<div class="layui-inline">
								<button type="reset" class="layui-btn layui-btn-primary">取消</button>
							</div>
						</div>
					</form>
				</div>
				<p class="copyright">Copyright 2020-2099 by jaman-team</p>
			</div>
		</div>
		<script src="static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script>
			layui.use(['form', 'layedit', 'jquery'], function() {
				var form = layui.form(),
					layer = layui.layer;
				$=layui.jquery;

				//自定义验证规则
				form.verify({
					managerName: function(value, item){ //value：表单的值、item：表单的DOM对象
					    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
					      return '用户名不能有特殊字符';
					    }
					    if(/(^\_)|(\__)|(\_+$)/.test(value)){
					      return '用户名首尾不能出现下划线\'_\'';
					    }
					    if(/^\d+\d+\d$/.test(value)){
					      return '用户名不能全为数字';
					    }
					  },
					  
					  //我们既支持上述函数式的方式，也支持下述数组的形式
					  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
					  managerPwd: [
					    /^[\S]{6,12}$/
					    ,'密码必须6到12位，且不能出现空格'
					  ] 
				});
				
				
				
				//监听提交
				form.on('submit(login)', function(data) {
					/* layer.alert(JSON.stringify(data.field), {
						title: '最终的提交信息'
					}) */
					console.log(data.field);
					$.ajax({
						type : "post", //提交方式
						url : "${pageContext.request.contextPath}/manager/login", ////地址和springmvc中控制器地址一致
						data : JSON.stringify({
							manager : {
								managerName : $("#managerName").val(),
								managerPwd : $("#managerPwd").val(),
							},
							verity : $("#verity").val()
						}), //提交给控制器的数据
						contentType : "application/json", //提交给控制的数据 格式
						dataType:"json",
						success : function(data) {	
							if(data.message == "验证码错误"){
								layer.msg(data.message);
							}
							if(data.message == "账号或密码错误"){
								layer.msg(data.message);								
							}
							if (data.message == "登录成功") {
								layer.msg(data.message);
								location.href="${pageContext.request.contextPath}/intoIndex";
							} 
							$("#verityid").click();	
						},
						error:function(){
							
				        },
					});
					return false;
				});

			});
		</script>
	</body>

</html>